 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
 .box
    {
    	background-image: url("img/game_bg.jpg");
    	width: 320px;
    	height: 480px;
    	position:relative; 
    }
    .socore
    {
        position:absolute; font-weight:bold; font-size:16px; color:white; left:65px; top:13px;
    }
    .timer
    {
        position:absolute; background:url("img/progress.png") 0 0 no-repeat; width:180px; height:16px; 
        left: 63px;top: 66px;
    }
    .start
    {
        position: absolute;
        top: 200px;
        left:120px;
        font-size: 50px;
        color: red;
        display: block;
    }
    .gameover
    {
        position: absolute;
        top: 250px;
        left:80px;
        font-size: 30px;
        color: red;
        display: none;
    }
    .wolfs img
    {
    	position: absolute;
    }
	</style>
</head>
<body>
	<div class="box">
    <div class="socore">0</div>
    <div class="timer"></div>
    <div class="start">start</div>
    <div class="gameover">Game over!</div>
	<div class="wolfs"></div>
	</div>
	<script type="text/javascript">
	var start=document.getElementsByClassName("start")[0];
	var gameover=document.getElementsByClassName("gameover")[0];
	var Tim=document.getElementsByClassName("timer")[0];
	var a=Tim.offsetWidth; 
    var socore=document.getElementsByClassName("socore")[0];
    var fen=null;
    var downTimer=null;
    var upTimer=null;
    var creatTimer=null;
    var wolfs=document.getElementsByClassName("wolfs")[0];
	var arrPos=[{l:"98px",t:"115px"},{l:"17px",t:"160px"},{l:"15px",t:"220px"},{l:"30px",t:"293px"},{l:"122px",t:"273px"},{l:"207px",t:"295px"},{l:"200px",t:"211px"},{l:"187px",t:"141px"},{l:"100px",t:"185px"}];
	start.onclick=function()
	{
		start.style.display="none";
        var CC=setInterval(function(){
         a-=0.3;
         Tim.style.width=a+"px";
         if ( a<=0)
	     {
	     	clearInterval(CC);
            clearInterval(creatTimer);
          gameover.style.display="block";
	     } 
        },10)
        // 新建一个计时器，每800毫秒新建一个狼。
    var creatTimer=setInterval(function(){
        var r=SJ(0,arrPos.length)
        // 新建一个狼
        var wolf=document.createElement("img");
        wolf.type=SJ(0,100)>87?"x":"h";
         wolf.index=0;
        // 排重
        var nowWolfs=wolfs.children;
            var bol=true;
            // 排重
            while(bol)
            {
                var r=SJ(0,arrPos.length);
                for(var i=0;i<nowWolfs.length;i++)
                {  
                 if (nowWolfs[i].offsetLeft==parseInt(arrPos[r].l)) 
                 {
                    break;
                 }  
                }
                if (i==nowWolfs.length) 
                {
                    bol=false;
                }
            }
        // 狼来了
       var upTimer=setInterval(function(){//此处为去全局变量，所以点击时可以获取到，可以清除定时器，此处你可以添加var，但是你没有添
          wolf.index++;
          if (wolf.index>4)
           {
              clearInterval(upTimer);
              down()
              
           }
            wolf.src="img/"+wolf.type+wolf.index+".png"
        },150)
           wolf.style.left=arrPos[r].l;
        wolf.style.top=arrPos[r].t; 
        // 向wolfs的Div里面添加wolf。
        wolfs.appendChild(wolf);
        // 狼跑了。
        var downTimer;
        function down()
        {
        	
        	//你写的  var downTimer=setInterval()。。形成函数内局部变量，产生闭包，所以点击时无法清除定时器
        	downTimer=setInterval(function(){//只需要吧var 去掉，让他变成全局变量即可
            wolf.index--;
            if(wolf.index<=0)
            {
            	clearInterval(downTimer);
            	wolfs.removeChild(wolf);
            }
            wolf.src=" img/"+wolf.type+wolf.index+".png";
        	},150)
        	
        	
        }
        // 我打狼
        
        var clickBol=true;
            wolf.onclick=function(){
            	clearInterval(upTimer);
            	clearInterval(downTimer);
                if (clickBol==false) 
                {return;}
            clickBol=false;
            wolf.index=5;
            
            Socore(wolf);
            var clickTimer=null;
            clickTimer=setInterval(function(){
            wolf.index+=1;
            console.log( wolf.index)
            if (wolf.index>=9) 
            {
                clearInterval(clickTimer);
                wolfs.removeChild(wolf);
            }
            wolf.src="img/"+wolf.type+wolf.index+".png";
            },150)
            }
    },800) 
	}
	function SJ(min,max)
	{
     return parseInt(Math.random()*(max-min)+min)
	}
    function Socore(obj)
           {
           var fen=parseInt(socore.innerHTML);
           // alert(fen)
           if (obj.type=="h")
           {
            socore.innerHTML=fen+10;
            // alert(socore.innerHTML)
           }
           else
           {
            socore.innerHTML=fen-10;
           }
           }
	</script>
</body>
</html>